<script lang="ts" setup>
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import type { SettingType } from '..'
import { SettingItem } from '..'
import { useDesignStore } from '@/store/design'

interface ActiveSetting {
  label: string
  value: string
}

const store = useDesignStore()
const { curComponentIndex, componentsInCanvas } = storeToRefs(store)

const activeName = ref('layout')
const options: ActiveSetting[] = [{
  label: '配置',
  value: 'layout',
}, {
  label: '数据',
  value: 'data',
}, {
  label: '交互',
  value: 'interactive',
}]

const componentSetting = ref<SettingType[]>([
  {
    name: 'base',
    title: '基础配置',
    items: [
      {
        name: 'id',
        title: '组件ID',
        control: 'Input',
        props: { disabled: true },
      },
      { name: 'title', title: '组件名称', control: 'Input' },
      { name: 'x', title: '横向距离', control: 'InputNumber' },
      { name: 'y', title: '纵向距离', control: 'InputNumber' },
      { name: 'width', title: '组件宽度', control: 'InputNumber' },
      { name: 'height', title: '组件长度', control: 'InputNumber' },
    ],
  },
  {
    name: 'style',
    title: '样式配置',
    items: [
      { name: 'color', title: '文本颜色', control: 'ColorPicker' },
      { name: 'background', title: '组件背景', control: 'UploadImage' },
      { name: 'themeColor', title: '主题色', control: 'ThemeSelect' },
    ],
  },
  // { name: '_base', title: '基础配置', items: [] },
])

watch(curComponentIndex, (index) => {
  componentSetting.value = componentsInCanvas.value[index].settings!
})
</script>

<template>
  <div class="component-attr-list-container h-full w-full flex flex-col">
    <el-segmented v-model="activeName" block class="mb-2 w-full" :options="options" />
    <SettingItem :settings="componentSetting" />
  </div>
</template>

<style lang="scss" module></style>
